<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name=renderer content=webkit>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- nw核心框架 -->
    <script src="../../nwqd.js"></script>
    <script src="js/xy.js"></script>

</head>
<script>
    function _xt_nw_qd0() {
        //初始化容器
        let _RQ = nw.cj('rq');
        _RQ.ys.xgNYS({ g: '200px', k: '600px', bk: 'solid red 1px', wz: 'relative', wbj: '5px', nbj: '5px' });
        //初始化儿子
        let _EZ = nw.cj('ez1');
        _EZ.ys.xgNYS({ g: '20px', k: '50px', bk: 'solid red 1px', X0: '0', bj_ys: 'blue', wbj_z: '1px', wbj_y: '2px', wbj_s: '3px', wbj_x: '4px' });

        _EZ = nw.cj('ez2');
        _EZ.ys.xgNYS({ g: '30px', k: '100px', bk: 'solid red 1px', X0: '100px', bj_ys: 'green', wbj_z: '5px', wbj_y: '6px', wbj_s: '7px', wbj_x: '8px' });

        _EZ = nw.cj('ez3');
        _EZ.ys.xgNYS({ g: '40px', k: '150px', bk: 'solid red 1px', X0: '250px', bj_ys: 'blue', wbj_z: '9px', wbj_y: '10px', wbj_s: '11px', wbj_x: '12px' });
        wo_zs();
    }

    function wo_zs() {
        wo_zsXX('ez1', 'zs_1')
        wo_zsXX('ez2', 'zs_2')
        wo_zsXX('ez3', 'zs_3')
    }
    //----------获取样式
    function wo_zsXX(ez, zsQu) {
        let _E = nw.cj(ez);
        let _Z = nw.cj(zsQu);
        let _KB = '&nbsp;&nbsp;&nbsp;&nbsp;';
        _Z.jd.xgNR_html('【坐标x】:' + _E.ys.zb_x() + _KB + '【坐标y】:' + _E.ys.zb_y())
        _Z.jd.xgNR_html('<br>【坐标x-html】:' + _E.ys.zb_x_html() + _KB + '【坐标y-html】:' + _E.ys.zb_y_html(), 1)
        _Z.jd.xgNR_html('<br>【x0-控制左右】:' + _E.ys.x0() + _KB + "，外边距-左:" + _E.ys.hqWBJ_z(), 1)
        _Z.jd.xgNR_html('<br>【x1-控制左右】:' + _E.ys.x1() + _KB + "，外边距-右:" + _E.ys.hqWBJ_y(), 1)
        _Z.jd.xgNR_html('<br>【y0-控制上下】:' + _E.ys.y0() + _KB + "，外边距-上:" + _E.ys.hqWBJ_s(), 1)
        _Z.jd.xgNR_html('<br>【y1-控制上下】:' + _E.ys.y1() + _KB + "，外边距-下:" + _E.ys.hqWBJ_x(), 1)

    }

    function wo_Y0(ez, zhi) {
        let _E = nw.cj(ez);
        _E.ys.y0(_E.ys.y0() + zhi + 'px')
        wo_zs();
    }
    function wo_Y1(ez, zhi) {
        let _E = nw.cj(ez);
        // _E.ys.y1(_E.ys.y1() + zhi + 'px')
        _E.ys.y1(_E.ys.y1() + zhi + 'px', true) //可以强制控制 Y1.本方法将删除Y0参数。然后再给Y1附值
        wo_zs();
    }
    function wo_X0(ez, zhi) {
        let _E = nw.cj(ez);
        _E.ys.x0(_E.ys.x0() + zhi + 'px')
        wo_zs();
    }
    function wo_X1(ez, zhi) {
        let _E = nw.cj(ez);
        // _E.ys.y1(_E.ys.y1() + zhi + 'px')
        _E.ys.x1(_E.ys.x1() + zhi + 'px', true) //可以强制控制 Y1.本方法将删除Y0参数。然后再给Y1附值
        wo_zs();
    }

    function wo_jiaodu(ez, jiaodu) {
        let _E = nw.cj(ez);
        switch (jiaodu) {
            //演示多种用法。四个方法的参数，都是一样的。比如，第三个参数，表示单位，如果存在，会自动附上。
            case 'zs'://左上角
                _E.ys.xy_zsj(0,0);
                break;
            case 'zx'://左下角
                _E.ys.xy_zxj(0, 0, 'px');
                break;
            case 'rs'://右上角
                _E.ys.xy_ysj(0, 0);
                break;
            case 'rx'://右下角
                _E.ys.xy_yxj(0, 0);
                break;
        }
        wo_zs();
    }



    function wo_ezPX(fx) {
        let _RQ = nw.cj('rq');
        let _E1 = nw.cj('ez1');
        let _E2 = nw.cj('ez2');
        let _E3 = nw.cj('ez3');
        // 【边框-上】自动对齐。无视外边距的影响。
        if (fx == 'ylj') {//左连接 
            //支持 父子，同级 节点。
            _RQ.ys
                .xy_ylj(_E1)
                .xy_ylj(_E2)
                .xy_ylj(_E3);
        } else if (fx == 'xlj') {//下连接
            //支持 父子，同级 节点。
            _RQ.ys
                .xy_xlj(_E1)
                .xy_xlj(_E2)
                .xy_xlj(_E3);
        }
        wo_zs();
    }

</script>
<style>
    #xxzs div {
        border: green 1px solid;
        height: 110px;
        font-size: 12px;
        position: absolute;
    }

    #rq div {
        position: absolute;
    }
</style>

<body>
    Y0优先级大于Y1。如果Y0控制了，Y1就不能控制。同样，X0>X1(本示例采用强控制控制X1前，会删除X0）<br>
    ez1:<button onclick="wo_Y0('ez1',1)">y0：+1</button>
    <button onclick="wo_Y0('ez1',-1)">y0：-1</button>
    <button onclick="wo_Y1('ez1',1)">y1：+1</button>
    <button onclick="wo_Y1('ez1',-1)">y1：-1</button>

    <button onclick="wo_X0('ez1',1)">x0：+1</button>
    <button onclick="wo_X0('ez1',-1)">x0：-1</button>
    <button onclick="wo_X1('ez1',1)">x1：+1</button>
    <button onclick="wo_X1('ez1',-1)">x1：-1</button><br>


    <button onclick="wo_jiaodu('ez1','zs')">左上角</button>
    <button onclick="wo_jiaodu('ez1','zx')">左下角</button>
    <button onclick="wo_jiaodu('ez1','rs')">右上角</button>
    <button onclick="wo_jiaodu('ez1','rx')">右下角</button>
    <br>


    <br>
    <button onclick="wo_ezPX('ylj')">ez1、ez2、ez3右连接</button>
    <button onclick="wo_ezPX('xlj')">ez1、ez2、ez3下连接</button>

    <div id="rq">
        <div id="ez1">ez1</div>
        <div id="ez2">ez2</div>
        <div id="ez3">ez3</div>
    </div>

    <h6>以下分别展示ez1、ez2、ez3的模块数据 ：</h6>
    <div id="xxzs" style="position: relative; height: 120px;">
        <div id="zs_1" style="width: 290px;margin: 5px;"> </div>
        <div id="zs_2" style="width: 300px; margin: 90px;"> </div>
        <div id="zs_3" style="width: 290px; margin: 20px;"> </div>
    </div>
    <script>
        function _xt_nw_qd1() {
            let zs1 = nw.cj('zs_1');
            let zs2 = nw.cj('zs_2');
            let zs3 = nw.cj('zs_3');
            //自动对齐边框。无视外边距的影响。
            zs1.ys
                .xy_ylj(zs2)
                .xy_ylj(zs3);
        }
    </script>
    <div>
        <hr>
        以x0，y0,x1,y1不动。只能盒子动。来演示参数：<br><br>
        <img style="width: 500px; " src="./hezi.jpg" />
    </div>

</body>

</html>